웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
크로스브라우징 관련 내용입니다. 특정 텍스트를 클립보드에 복사하는 경우 IE 및 Edge에서 스크롤이 하단으로 이동하는 문제가 발생합니다. 어떻게 해결하는지 아래에서 확인해보세요.
해결방법은 클립보드를 위해 생성한 임시 태그 input 또는 textarea에 fixed 스타일을 추가하는 것입니다. 해당 이슈는 스크롤이 생기면서 발생하게 되는데 fixed 스타일값이 스크롤에 영향을 주지 않게합니다.
아래 코드를 봐주세요.
위의 3번 라인처럼 클립보드 엘리먼트에 fixed 스타일을 추가하도록 합니다. 이제 IE, Edge에서 스크롤 이동 문제가 나타나지 않습니다.
참고로 클립보드 할 문구가 input, textarea 요소에 없는 경우 위와 같이 임시 태그를 만들어 값을 추가한 후 이를 다시 삭제하는 방법이 사용됩니다. 그래야 클립보드 복사를 할 수 있기 때문이니 참고하세요.
! 해결방법
해결방법은 클립보드를 위해 생성한 임시 태그 input 또는 textarea에 fixed 스타일을 추가하는 것입니다. 해당 이슈는 스크롤이 생기면서 발생하게 되는데 fixed 스타일값이 스크롤에 영향을 주지 않게합니다.
아래 코드를 봐주세요.
var copyText= 'webisfree.com';
var clipboardEle = document.createElement('textarea');
clipboardEle .style.position = 'fixed';
// fixed 스타일을 줄 것
clipboardEle .value = copyText;
document.body.appendChild(clipboardEle );
clipboardEle .select();
document.execCommand("copy");
document.body.removeChild(clipboardEle);
var clipboardEle = document.createElement('textarea');
clipboardEle .style.position = 'fixed';
// fixed 스타일을 줄 것
clipboardEle .value = copyText;
document.body.appendChild(clipboardEle );
clipboardEle .select();
document.execCommand("copy");
document.body.removeChild(clipboardEle);
위의 3번 라인처럼 클립보드 엘리먼트에 fixed 스타일을 추가하도록 합니다. 이제 IE, Edge에서 스크롤 이동 문제가 나타나지 않습니다.
! 클립보드 임시태그를 사용하는 이유
참고로 클립보드 할 문구가 input, textarea 요소에 없는 경우 위와 같이 임시 태그를 만들어 값을 추가한 후 이를 다시 삭제하는 방법이 사용됩니다. 그래야 클립보드 복사를 할 수 있기 때문이니 참고하세요.
아래의 글도 찾고 계시지 않나요?
